<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-07-08 09:39:25
 * @LastEditors: Kevin
 * @LastEditTime: 2022-07-19 15:37:44
-->
<template>
  <RjModal
    width="800px"
    :title="$t('userManage.oneClickTitle')"
    :visible="value"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    :okText="$t('userManage.oneClickSure')"
    @cancel="$emit('set', false)"
  >
    <p>
      {{ $t('userManage.oneClickSendFollowingEmail') }}
    </p>
    <div class="letter flex-column">
      <div>Dear XXX,</div>
      <hr style="opacity: 0.3" />
      <div class="content">
        <div>Your portal login account/password: test/123456</div>
        <div>Your VPN login account/password: test/123456</div>
        <div>
          VPN server information: (Not applicable to users who do not enable
          VPN.)
        </div>
        <div>Server IP/Domain:xxxxxxx.ruijieeddns.com</div>
        <div>VPN Login Guide:{{ url }}</div>
      </div>
      <div class="text-right">Ruijie Network</div>
      <div class="text-right">{{ date }}</div>
    </div>
  </RjModal>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import moment from 'moment-timezone';
import { mapState } from 'vuex';
export default {
  props: {
    value: Boolean,
    sendAccounts: Array,
  },
  model: {
    prop: 'value',
    event: 'set',
  },
  data() {
    let hostname = window.location.host;
    let url;
    if (hostname.includes('cloud-as')) {
      url =
        'https://enet-as.ruijienetworks.com/s2b2cUniapp/#/vpnHelp/index?type=L2TP,PPTP,OpenVPN&lang=en';
    } else if (hostname.includes('cloud-eu')) {
      url =
        'https://enet-eu.ruijienetworks.com/s2b2cUniapp/#/vpnHelp/index?type=L2TP,PPTP,OpenVPN&lang=en';
    } else if (hostname.includes('cloudtest-as')) {
      url =
        'https://enettest-hk.ruijienetworks.com:32443/s2b2cUniapp/#/vpnHelp/index?type=L2TP,PPTP,OpenVPN&lang=en';
    } else {
      url =
        'https://enet-as.ruijienetworks.com/s2b2cUniapp/#/vpnHelp/index?type=L2TP,PPTP,OpenVPN&lang=en';
    }
    return {
      confirmLoading: false,
      date: moment().format('yyyy-MM-DD'),
      url,
    };
  },

  mounted() {},
  computed: {
    ...mapState('Group', ['groupInfo']),
  },
  methods: {
    async handleOk() {
      this.zhugePoint('macc-用户管理-分享一键发送', {
        workId: 'maccNetConf',
        funcId: 'macc-userMng',
      });
      let vpnInfoList = [...this.sendAccounts];
      vpnInfoList.forEach((item) => {
        item.vpnGuide = this.url;
      });
      let params = {
        vpnInfoList,
      };
      let querys = {
        group_id: this.groupInfo.groupId,
      };
      this.confirmLoading = true;
      let res = await requestHttp({
        api: `${maccApi.USER_MANAGE_ACCOUNT_SEND_VPN_INFO}`,
        method: 'POST',
        params,
        querys,
      });
      this.confirmLoading = false;
      if (!res.code) {
        if (!res?.voucherData?.code) {
          this.$message.success(this.$t('userManage.success'));
          this.$emit('ok');
          this.$emit('set', false);
        } else {
          this.$message.warning(res.voucherData.msg);
        }
      } else {
        this.$message.warning(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  font-size: 18px;
}
.letter {
  background: #f5f5f5;
  color: #262626;
  padding: 15px;
  .content {
    line-height: 2;
  }
  p {
    font-size: 14px;
  }
  a {
    text-decoration: underline;
  }
}
.flex-column {
  display: flex !important;
  flex-direction: column !important;
}
.text-right {
  text-align: right;
}
</style>
